<script lang="ts" setup>
	import { ref } from 'vue'

	const activeIndex = ref('1')
	const activeIndex2 = ref('1')
	const handleSelect = (key : string, keyPath : string[]) => {
		console.log(key, keyPath)
	}
</script>

<template>
	<div class="页面">
		<div class="顶部">
			<!-- <div class="test"></div> -->
			<el-menu :default-active="activeIndex" class="el-menu-demo 导航" mode="horizontal" @select="handleSelect">
				<el-menu-item index="1">处理中心</el-menu-item>
				<el-sub-menu index="2">
					<template #title>工作区</template>
					<el-menu-item index="2-1">项目 1</el-menu-item>
					<el-menu-item index="2-2">项目 2</el-menu-item>
					<el-menu-item index="2-3">项目 3</el-menu-item>
					<el-sub-menu index="2-4">
						<template #title>项目 3</template>
						<el-menu-item index="2-4-1">项目 1</el-menu-item>
						<el-menu-item index="2-4-2">项目 2</el-menu-item>
						<el-menu-item index="2-4-3">项目 3</el-menu-item>
					</el-sub-menu>
				</el-sub-menu>
				<el-menu-item index="3" disabled>信息</el-menu-item>
				<el-menu-item index="4">订单</el-menu-item>
			</el-menu>
		</div>
		<div class="内容">

			<div class="test">
				<!-- el-row el-col -->
				<el-row :gutter="10">
					<el-col :span="12" :xs="24" class="row">
						<div class="grid-content ep-bg-purple" />
					</el-col>
					<el-col :span="12" class="row">
						<div class="grid-content ep-bg-purple" />
					</el-col>
				</el-row>
			</div>

		</div>
	</div>

</template>

<style scoped>
	.row {
		margin-bottom: 20px;
	}
	.grid-content {
		height: 80px;
		background-color: azure;
	}
	.test {
		height: 80px;
		background-color: aqua;
	}

	.内容 .test {
		height: 8000px;
		background-color: blue;
	}

	.导航 {
		/* 1400px */
		padding-left: 10%;
		padding-right: 10%;
	}

	.顶部 {
		position: sticky;
		top: 0;
	}

	.内容 {
		max-width: 1200px;

		margin: 0 auto;
	}
</style>